<template>
  <img :class="$style['finger']" src="@/assets/images/fingers.png" alt="finger">
</template>

<script
  lang="ts"
  setup
  name="Finger"
>
</script>

<style
  module
  lang="scss"
>
.finger {
  opacity: 0;
  animation: click 1s ease-in-out 1s both;
}

@keyframes click {
  0% {
    transform: scale(1.2);
    opacity: 0.1;
  }

  40% {
    transform: scale(0.6);
    opacity: 1;
  }

  80% {
    transform: scale(1.2);
  }

  100% {
    opacity: 0.1;
  }
}
</style>
